<template>
  <div class="home-container">
    <el-container class="home-container">
      <!-- header -->
      <el-header >
        <div>
          <img src="../assets/logo.png" alt="">
          <span>后台管理</span>
        </div>
        <el-button type="info" @click="loginout">退出</el-button>
      </el-header >
        <el-container>
          <!-- 侧边栏 -->
         <el-aside :width="boolean?'64px':'200px'">
           <div class="taggle" @click="taggleMenu">
             |||
           </div>
          <el-menu background-color="yellowgreen" text-color="#fff" active-text-color="yellow" :unique-opened='true' :collapse='boolean' ref='menu' :collapse-transition='false' :router='true' :default-active='active'>
           <!-- 一级菜单 -->
           <el-submenu  v-for="(item) in menusList" :index='item.id+""' :key='item.id'>
            <template slot="title">
             <i :class="icons[item.id]"></i>
             <span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
              <el-menu-item v-for="(item) in item.children" :key='item.id' :index="'/'+item.path" @click="saveActive('/'+item.path)"> 
                 <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{item.authName}}</span>
                 </template>
              </el-menu-item>
           </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
     </el-container> 
  </el-container> 

</div>
</template>

<script>
export default {
  data(){
    return{
      menusList:[],
      icons:{
        '125':'iconfont icon-users',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      },
      boolean:false,
      width:'',
      active:''
    }
  },
  created(){
   this.getMenus()
   this.active = window.sessionStorage.getItem('active')
  },
  methods:{
  loginout(){
    /* 退出原理 清除token 重定向到login */
    window.sessionStorage.clear()
    this.$router.push('/login')
  },
  /* 获取菜单 */
  getMenus(){
    this.$http.get('menus').then(response =>{
      let res = response.data
     // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menusList = res.data
    })
  },
  /* 点击按钮切换菜单展开 */
  taggleMenu(){
    this.boolean = !this.boolean
  },
  /* 保存链接激活状态 */
  saveActive(path){
    window.sessionStorage.setItem('active',path)
    this.active = path
    
  }
}
}
</script>

<style lang="less" scoped>
.taggle{
  background-color: rgb(152, 189, 78);
  color: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.el-header{
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  background-color: yellowgreen;
  span{

    padding-left: 10px;
  }
}
.el-aside{
  background-color: yellowgreen;
  .el-menu{
  border: 0;
}
}

.el-main{
  background-color: turquoise;
}
.home-container{
  width: 100%;
  height: 100%;
}
div{
  img{
    width: 60px;
    height: 60px;
    vertical-align: middle;
    border-radius: 50%;
  }
}
.iconfont{
  margin-right: 10px;
  color: rgb(212, 208, 208);
}
</style>